<template>
    <div class="w-full  h-screen item-center  p-0">
        <el-menu
            :collapse="fold"
            :unique-opened=true
            active-text-color="#d8e3e7"
            background-color="#131824"
            mode="vertical"
            router
            text-color="#bfcbd9">
            <sidebar-item v-for="menu in menuList" :key="menu.path" :item="menu"/>
        </el-menu>
    </div>
</template>
<script>
import SidebarItem from './SidebarItem'

export default {
    name: 'Sidebar',
    components: {SidebarItem},
    props: {
        menuList: {
            type: Array,
            required: true
        },
        fold: {
            type: Boolean
        },

    },
    data() {
        return {
            isCollapse: false
        }
    }
}
</script>
<style lang="scss" scoped>
.sidebar-container {
    transition: width 0.28s;
    width: 180px !important;
    height: 100%;
    position: fixed;
    font-size: 0px;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;

    .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .el-scrollbar {
        height: 100%;
    }

    .scrollbar-wrapper {
        overflow-x: hidden !important;

        .el-scrollbar__view {
            height: 100%;
        }
    }

    .el-scrollbar__bar.is-vertical {
        right: 0px;
    }

    .is-horizontal {
        display: none;
    }

    a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
    }

    .el-menu {
        border-right: 0 !important;
        height: 100%;
        width: 100% !important;
    }

    .is-active > .el-submenu__title {
        color: #f4f4f5 !important;
    }
}
</style>
